<template>
  <div class="transport-list">
    <el-card>
      <template #header>
        <div class="flex justify-between items-center">
          <span class="font-medium">运输记录列表 (设备号: {{ deviceId }})</span>
          <!-- <el-button type="primary" :icon="ArrowLeft" @click="goBack">
            返回车辆列表
          </el-button> -->
        </div>
      </template>
      
      <ProTable
        ref="proTableRef"
        :columns="columns"
        :request-api="getTableList"
        :init-param="{ dtuNumber: deviceId }"
        row-key="id"
      >
      </ProTable>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ArrowLeft } from '@element-plus/icons-vue';
import ProTable from '@/components/ProTable/index.vue';
import { getDtuTransportInfoListApi } from '@/api/modules/dtuinfo/dtuTransportInfo';
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface';
import type { DtuTransportInfoQuery, DtuTransportInfoRow } from '@/api/types/dtuinfo/dtuTransportInfo';

defineOptions({
  name: 'TransportList'
});

const route = useRoute();
const router = useRouter();

// Get deviceId from route query
const deviceId = computed(() => route.query.deviceId as string || '');

const proTableRef = ref<ProTableInstance>();

// 表格配置项
const columns: ColumnProps<DtuTransportInfoRow>[] = [
  { prop: 'id', label: 'ID', width: 80 },
  { prop: 'dtuNumber', label: '设备号', width: 120 },
  { prop: 'startTime', label: '开始时间', width: 180 },
  { prop: 'endTime', label: '结束时间', width: 180 },
  { prop: 'startLongitude', label: '起点经度', width: 120 },
  { prop: 'startLatitude', label: '起点纬度', width: 120 },
  { prop: 'endLongitude', label: '终点经度', width: 120 },
  { prop: 'endLatitude', label: '终点纬度', width: 120 },
  { prop: 'transportDistance', label: '运输距离(km)', width: 120 },
  { prop: 'userId', label: '用户ID', width: 100 },
  { prop: 'createTime', label: '创建时间' },
//   { prop: 'updateTime', label: '更新时间', width: 180 }
];

// 获取表格列表
const getTableList = (params: DtuTransportInfoQuery) => {
  if (deviceId.value) {
    return getDtuTransportInfoListApi({ ...params, dtuNumber: deviceId.value });
  }
  // 如果没有有效的deviceId，返回空数据
  return Promise.resolve({
    data: {
      current: 1,
      limit: 10,
      totalPage: 0,
      total: 0,
      rows: []
    }
  });
};

// 返回车辆列表
const goBack = () => {
  router.go(-1);
};
</script>

<style scoped lang="scss">
.transport-list {
  padding: 20px;
}

.flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

.font-medium {
  font-weight: 500;
}
</style>